 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<style>
    body{
        font-family: PingFangSC-Regular,"Helvetica Neue",Helvetica,Arial,sans-serif,"Microsoft YaHei";
    }
    header .col-md-12{

    }
    #icon{
        width: 142px;
        height: 32px;
        margin: 10px 15px;
        float: left;
    }
    #icon a{
        text-decoration-line:none;
    }
    .option{
        float: left;
        width: 410px;
        height: 40px;
        padding: 18px 0 0 20px;
    }
    .option span{
        margin: 0 25px;
    }
    .option a{
        text-decoration-line:none;
        color: #333333;
        font-size: 16px;
    }
    .option a:hover{
        color: #888888;
    }
    header div{
        height: 56px;
    }

    section .col-md-2{
        padding: 10px 0 0 0;
        width: 194px;
        height: 681px;
        background-color: #f7f7f7;
    }
    #left{
        width: 194px;
        height: 315px;
        margin: 0;
        list-style: none;
        padding: 0;

    }
    #left li{
        height: 45px;
    }
    .text{
        margin-left: 27px;
        color: #666666;
    }
    #left li a{
        display: block;/*为了可以修改宽高*/
        height: 45px;
        text-decoration-line:none;
        line-height: 45px;
        text-align: center;
    }
    #left li a:hover{
        background-color:#e8e8e8;
    }


    section .col-md-10{

    }
    #top_1{
        width: 928px;
        height: 32px;
    }
    .button{
        padding: 0 16px;
        color: rgb(6,167,255);
        font-weight: bold;
        border-radius: 50px;
    }

    .all{
        width:1100px ;
        height: 40px;
        padding: 6px 14px 0 12px;
    }
    #all_left{
        float: left;
        width: 48px;
        height: 20px;
        color: #03081a;
        font-size: 12px;
        font-weight: bold;
    }
    #all_right{
        float: right;
        width: 125px;
        height: 41px;
        color: #afb3bf;
        font-size: 12px;
    }

    .all_2{
        width:1100px ;
        height: 51px;
        padding: 6px 14px 0 12px;
        color: #03081a;
        font-size: 12px;
        font-weight: bold;
    }

    .button_left{
        width: 700px;
        height: 550px;
        float: left;
    }

    .button_right{
        width: 400px;
        height: 650px;
        background-color: #f5f6fa;
        padding: 16px;
        float: left;
        position: relative;/*做参照物*/
    }
    #aa{
        width: 120px;
        height: 110px;
        position: absolute;/*绝对定位*/
        top: 270px;
        left: 155px;
    }

    section div {
        height: 913px;
    }



</style>
<body>
<div>

    <header class="row">
    <div  class="col-md-12" style="height: 61px;">
        <div id="icon">
        <a href="#" target="_self" style="font-weight: bold;font-size: 25px;color: black" title="网盘"><i style="color: #62b5ec;font-size: 30px" class="fa fa-meetup" aria-hidden="true"></i>xx网盘</a>
        </div>

        <div class="option">
            <span><a href="">网盘</a></span>
            <span><a href="">分享</a></span>
            <span><a href="">更多</a></span>
        </div>

        <div class="option">
            <span><a href=""><i class="fa fa-user-circle" aria-hidden="true" title="个人中心"></i></a></span>
            <span><a href=""><i class="fa fa-envelope-square" aria-hidden="true" title="意见反馈"></i></a></span>
            <span><a href=""><i class="fa fa-bell-o" aria-hidden="true" title="系统通知"></i></a></span>
        </div>
    </div>
    </header>

    <section class="row">
    <div  class="col-md-2">
        <ul id="left">
            <li>
                <a href="#" style="background-color:#e8e8e8;">
                    <span style="color:#09aaff;">
                        <span><i class="fa fa-bars" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">我的文件</span>
                    </span>
                </a>
            </li>

            <li>
                <a href="">
                    <span class="text">
                        <span><i class="fa fa-area-chart" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">图片</span>
                    </span>
                </a>
            </li>

            <li>
                <a href="">
                    <span class="text">
                        <span><i class="fa fa-file-o" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">文档</span>
                    </span>
                </a>
            </li>

            <li>
                <a href="">
                    <span class="text">
                        <span><i class="fa fa-play" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">视频</span>
                    </span>
                </a>
            </li>

            <li>
                <a href="">
                    <span class="text">
                        <span><i class="fa fa-music"></i></span>
                        <span style="margin-left: 10px;">音乐</span>
                    </span>
                </a>
            </li>

            <li>
                <a href="">
                    <span class="text">
                        <span><i class="fa fa-ellipsis-h"></i></span>
                        <span style="margin-left: 10px;">其它</span>
                    </span>
                </a>
            </li>

            <li>
                <a href="">
                    <span class="text">
                        <span><i class="fa fa-comment-o" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">我的分享</span>
                    </span>
                </a>
            </li>

            <li>
                <a href="">
                    <span class="text">
                        <span><i class="fa fa-trash" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">回收站</span>
                    </span>
                </a>
            </li>

            <li>
                <a href="">
                    <span class="text">
                        <span><i class="fa fa-archive" aria-hidden="true"></i></span>
                        <span style="margin-left: 10px;">收集文件</span>
                    </span>
                </a>
            </li>
        </ul>
    </div>


    <div  class="col-md-10">
        <div id="top_1">
                <button class="button">
                    <i class="fa fa-upload"></i>
                    <span>上传</span>
                </button>

                <button class="button">
                    <i class="fa fa-share"></i>
                    <span>分享</span>
                </button>

                <button class="button">
                    <i class="fa fa-download"></i>
                    <span>下载</span>
                </button>
        </div>
        
        <div class="all">
            <div id="all_left"><span>全部文件</span></div>
            <div id="all_right"><span>已全部加载共xx个</span><span class="fa fa-server" style="padding-left: 5px;font-size: 15px"></span></div>
        </div>

        <div class="all_2">
        <div style="display: inline-block;width: 300px;height: 51px;"><input type="checkbox"style="margin:0;padding-top: 2px"><span>文件名</span></div>
        <span style="display: inline-block;width: 240px;height: 51px;">修改时间</span>
        <span style="display: inline-block;width: 120px;height: 51px;">大小</span>
        </div>

        <div class="button_left">

        </div>

        <div class="button_right">
            <div style="width: 240px; height: 31px;padding-bottom: 15px;color:#03081a;font-size: 14px;font-weight: bold">文件详情</div>
            <div id="aa">
                <img src="https://nd-static.bdstatic.com/m-static/v20-main/img/empty-folder.55c81ea2.png" alt=""style="width:60px;height: 60px;margin-left: 20px">
                <p style="color: #878c9c;font-size: 14px">选中文件,查看详情</p>
            </div>
        </div>
    </div>
    </section>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

</body>
</html>